<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情</title>
    <script src="./js/rem_32.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/details.css">
</head>

<body>
    <div class="container">
        <div class="shade" id="shade">
            <div class="share_shade_fx">
                <h3>分享到</h3>
                <div class="grid">
                    <div>
                        <a href="#"><img width="50" src="images/particulars/Wechat_friends.png" alt=""></a>
                        <p>微信好友</p>
                    </div>
                    <div>
                        <a href="#"><img width="50" src="images/particulars/Moments.png" alt=""></a>
                        <p>朋友圈</p>
                    </div>
                    <div>
                        <a href="#"><img width="50" src="images/particulars/QQ_friend.png" alt=""></a>
                        <p>QQ好友</p>
                    </div>
                    <div>
                        <a href="#"><img width="50" src="images/particulars/space.png" alt=""></a>
                        <p>QQ空间</p>
                    </div>
                    <div>
                        <a href="#"><img width="50" src="images/particulars/Sina_microblog.png" alt=""></a>
                        <p>新浪微博</p>
                    </div>
                    <div>
                        <a href="copysuccess.html"><img width="50" src="images/particulars/copy_link.png" alt=""></a>
                        <p>复制链接</p>
                    </div>
                </div>
                <h3><a href="#" id="quxiao">取消</a></h3>
            </div>
            <div class="product_standard" id="jrgwc">
                <div class="close">
                    <a href="javascript:;" class="closeBtn"><img src="images/product_list/close.png" height="15"
                            alt=""></a>
                </div>
                <div class="lipstick">
                    <img src="images/product_list/lipstick.png" alt="">
                    <div class="txt">
                        <p class="title">依泉润唇膏套装 保湿滋润补水物色防干裂 唇部护理唇膜淡化唇纹</p>
                        <p class="price">¥<span>98.9</span></p>
                        <p class="inventory">库存1908件</p>
                    </div>
                </div>
                <div class="line"></div>
                <div class="cpgg">
                    <p>产品规格</p>
                    <ul>
                        <li><a href="#" class="a2 active" style="margin-right: 1.5625rem;">8g/ml</a></li>
                        <li><a href="#" class="a2">4g/ml</a></li>
                    </ul>
                </div>
                <div class="line"></div>
                <div class="gmsl">
                    <span>购买数量</span>
                    <div>
                        <a href="javascript:;" id="remove">-</a>
                        <i id="num">1</i>
                        <a href="javascript:;" id="add">+</a>
                    </div>
                </div>
                <div class="line"></div>

                <button class="jrgwc jrgwc3">加入购物车</button>
            </div>
            <div class="product_standard" id="ljgm">
                <div class="close">
                    <a href="javascript:;" class="closeBtn"><img src="images/product_list/close.png" height="15"
                            alt=""></a>
                </div>
                <div class="lipstick">
                    <img src="images/product_list/lipstick.png" alt="">
                    <div class="txt">
                        <p class="title">依泉润唇膏套装 保湿滋润补水物色防干裂 唇部护理唇膜淡化唇纹</p>
                        <p class="price">¥<span>98.9</span></p>
                        <p class="inventory">库存1908件</p>
                    </div>
                </div>
                <div class="line"></div>
                <div class="cpgg">
                    <p>产品规格</p>
                    <ul>
                        <li><a href="#" class="a2 active" style="margin-right: 1.5625rem;">8g/ml</a></li>
                        <li><a href="#" class="a2">4g/ml</a></li>
                    </ul>
                </div>
                <div class="line"></div>
                <div class="gmsl">
                    <span>购买数量</span>
                    <div>
                        <a href="javascript:;" id="remove2">-</a>
                        <i id="num2">1</i>
                        <a href="javascript:;" id="add2">+</a>
                    </div>
                </div>
                <div class="line"></div>

                <button class="jrgwc jrgwc2">确定</button>
            </div>
        </div>
        <header>
            <a href="#" onclick="history.back()"><img src="images/particulars/left_arrow.png" alt="" height="20"></a>
            <h1>商品详情</h1>
            <a href="#" id="fenxiang"><img src="images/particulars/share.png" alt="" height="20"></a>
        </header>
        <div class="wrap">
            <div class="banner" id="banner">
                <div class="interspace">
                    <ul>
                        <li><img src="images/particulars/xq_banner1.png" alt=""></li>
                        <li><img src="images/particulars/xq_banner1.png" alt=""></li>
                        <li><img src="images/particulars/xq_banner1.png" alt=""></li>
                        <li><img src="images/particulars/xq_banner1.png" alt=""></li>
                        <li><img src="images/particulars/xq_banner1.png" alt=""></li>
                    </ul>
                </div>
                <ol>
                    <li class="current"></li>
                    <li></li>
                    <li></li>

                </ol>
            </div>
            <div class="text_content">
                <div class="price clearfix">
                    <div class="pre fl">
                        <p>¥<span>98.9</span></p>
                        <small>¥99.9</small>
                    </div>
                    <div class="purchase fr">
                        <span>距抢购结束还剩:</span><em id="hour">00</em><i>:</i><em id="minute">05</em><i>:</i><em
                            id="second">34</em>
                    </div>
                </div>
                <div class="title">
                    <p>依泉润唇膏套装 保湿滋润补水物色防干裂 唇部护理唇膜淡化唇纹</p>
                    <img src="images/particulars/lingquan.png" alt="">
                    <a href="./rollcenter.html"><span>领券 &gt;</span></a>
                </div>
                <div class="line"></div>
                <div class="expressage">
                    <p>快递<span class="nbsp">:</span>免运费</p>
                    <p>月销<span class="nbsp">:</span>2</p>
                </div>
                <div class="line"></div>
                <div class="site">
                    <p><span>选择</span>配送至:温州市，已选:“8g/ml”</p><img height="14" src="images/particulars/right_arrow.png"
                        alt="">
                </div>
                <div class="line"></div>
                <div class="news">
                    <div class="title">
                        <span></span>
                        <h3>商品信息</h3>
                    </div>

                    <div class="txt">
                        <p>品牌</p>
                        <p>依泉</p>
                        <p>产地</p>
                        <p>法国</p>
                        <p>保质期</p>
                        <p>3年</p>
                        <p>功效</p>
                        <p>减淡唇纹、淡化唇色、保湿、滋润、润唇</p>
                    </div>
                </div>
            </div>
            <div class="text_content text_content2">
                <div class="header">
                    <div class="line"></div>
                    <h2>商品详情</h2>
                    <div class="line"></div>
                </div>
                <div class="main_img">
                    <img src="images/particulars/detail_page.png" alt="">
                </div>
            </div>
            <div class="text_content text_content2">
                <div class="header">
                    <div class="line"></div>
                    <h2>猜你喜欢</h2>
                    <div class="line"></div>
                </div>
                <ul class="cnxh">
                    <li>
                        <div class="img">
                            <img src="images/particulars/cnxh01.jpg" alt="">
                        </div>
                        <div class="text">
                            <p>依泉水漾修护润手霜30ml牛油果保湿滋润肉能肌肤</p>
                            <p class="foot">
                                <span>
                                    <i>¥</i>
                                    <em class="price">48.0</em>
                                </span>
                                <span>点击查看&gt;</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="images/particulars/cnxh01.jpg" alt="">
                        </div>
                        <div class="text">
                            <p>依泉水漾修护润手霜30ml牛油果保湿滋润肉能肌肤</p>
                            <p class="foot">
                                <span>
                                    <i>¥</i>
                                    <em class="price">48.0</em>
                                </span>
                                <span>点击查看&gt;</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="images/particulars/cnxh01.jpg" alt="">
                        </div>
                        <div class="text">
                            <p>依泉水漾修护润手霜30ml牛油果保湿滋润肉能肌肤</p>
                            <p class="foot">
                                <span>
                                    <i>¥</i>
                                    <em class="price">48.0</em>
                                </span>
                                <span>点击查看&gt;</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="images/particulars/cnxh01.jpg" alt="">
                        </div>
                        <div class="text">
                            <p>依泉水漾修护润手霜30ml牛油果保湿滋润肉能肌肤</p>
                            <p class="foot">
                                <span>
                                    <i>¥</i>
                                    <em class="price">48.0</em>
                                </span>
                                <span>点击查看&gt;</span>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
            <footer>
                <div class="left">
                    <div>
                        <a href="./server.html"><img src="images/particulars/kf.png" alt=""></a>
                        <a href="./server.html"><span>客服</span></a>
                    </div>
                    <div>
                        <a href="JavaScript:;" id="collect"><img src="images/particulars/sc.png" alt=""></a>
                        <span class="shoucang margin_0">收藏</span>
                    </div>
                </div>
                <div class="right">
                    <button id="shoppingCart">加入购物车</button>
                    <button id="shoppingbuy">立即购买</button>
                </div>
            </footer>
        </div>
    </div>
    <script>

        goNext('.jrgwc3','./shopcart.html')
        goNext('.jrgwc2','./orderconfirm.html')



        //收藏按钮
        collect('#collect')
        function collect(btn) {
            // alert(11)
            var flag = true;
            var btn = document.querySelector(btn);
            var text = document.querySelector('.shoucang');

            btn.onclick = function () {
                if (flag) {
                    btn.children[0].src = 'images/particulars/sc_active.png';
                    text.innerHTML = '取消收藏'
                    flag = false;
                    // console.log(1);
                } else {
                    btn.children[0].src = 'images/particulars/sc.png';
                    text.innerHTML = '收藏'
                    flag = true;
                    // console.log(2);
                }
            }
        }
        // 加入购物车/立即购买
        function shoppingCart() {
            //分享
            var share_shade_fx = document.querySelector('.share_shade_fx');
            var a_fenxiang = document.getElementById('fenxiang');
            var a_quxiao = document.getElementById('quxiao');
            var shade = document.getElementById('shade');
            var shoppingCart = document.getElementById('shoppingCart');
            var shoppingbuy = document.getElementById('shoppingbuy');
            var jrgwc = document.getElementById('jrgwc');
            var ljgm = document.getElementById('ljgm');
            console.log(shoppingCart);
            console.log(jrgwc);
            //关闭按钮
            var closeBtns = document.querySelectorAll('.closeBtn')
            shoppingCart.onclick = function () {
                shade.style.display = 'block';
                jrgwc.style.display = 'block';
                ljgm.style.display = 'none';
                console.log(11);
            }
            shoppingbuy.onclick = function () {
                shade.style.display = 'block';
                ljgm.style.display = 'block';
                jrgwc.style.display = 'none';
            }
            closeBtns[0].onclick = function () {
                shade.style.display = 'none';
                jrgwc.style.display = 'none';
                ljgm.style.display = 'none';
            }
            closeBtns[1].onclick = function () {
                shade.style.display = 'none';
                jrgwc.style.display = 'none';
                ljgm.style.display = 'none';
            }
            a_fenxiang.onclick = function () {
                shade.style.display = 'block';
                share_shade_fx.style.display = 'block';
                ljgm.style.display = 'none';
            }
            a_quxiao.onclick = function () {
                shade.style.display = 'none';
                share_shade_fx.style.display = 'none';
                jrgwc.style.display = 'none'
                ljgm.style.display = 'none';
            }
        }
        shoppingCart();

        function count(add, num, remove) {
            var add = document.getElementById(add);//+
            var num = document.getElementById(num);//变化的数字
            var remove = document.getElementById(remove);//-
            var x = 1;//计数，默认等于1
            var max = 5;
            var min = 0;
            //加
            add.onclick = function () {
                num.innerHTML++
                x++;
                if (x > max) {
                    x = max;
                }
                num.innerHTML = x;
            }
            remove.onclick = function () {
                num.innerHTML--
                x--;
                if (x < min) {
                    x = min;
                }
                num.innerHTML = x;
            }
        }
        count('add', 'num', 'remove');
        count('add2', 'num2', 'remove2');

        //加入购车点击切换效果
        function a2(el) {
            // console.log(as);
            var as = document.querySelectorAll(el);
            for (let i = 0; i < as.length; i++) {
                as[i].onclick = function () {
                    for (let i = 0; i < as.length; i++) {
                        as[i].classList.remove('active')
                    }
                    this.classList.add('active');
                }

            }
        }
        a2('.a2');

        //秒杀
        /*   function Seckill(hour, minute, second, inputTime) {
              var obj = {
                  hour: document.getElementById(hour),
                  minute: document.getElementById(minute),
                  second: document.getElementById(second),
                  inputTime: +new Date(inputTime),
                  countDown: function () {
                      var _this = this;
                      console.log();
                      var nowDate = +new Date();//现在的总毫秒数
                      var times = (nowDate - obj.inputTime) / 1000;//时间戳，换算成秒数
                      var h = parseInt(times / 60 / 60 % 24);//小时
                      h = h < 10 ? '0' + h : h;//不足补0
                      var m = parseInt(times/60%60);
                      m = m < 10 ? '0' + m : m;//不足补0
                      var s = parseInt(times%60);
                      s = s < 10 ? '0' + s : s;//不足补0
                      this.hour.innerHTML = h;
                      this.minute.innerHTML = m;
                      this.second.innerHTML = s;
                      // console.log(this.inputTime);
                  }
              }
              console.log(obj.inputTime);
              obj.countDown();
              setInterval(obj.countDown,1000);
              return obj;
          }
          Seckill('hour', 'minute', 'second', '2021-2-1 18:00:00'); */

        //秒杀
        function countDown() {
            hour = document.querySelector('#hour');
            var minute = document.querySelector('#minute');
            var second = document.querySelector('#second');
            var inputTime = +new Date('2022-9-1 18:00:00'); //目标时间
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h; //不足补0
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
        countDown();//先调用一次
        setInterval(countDown, 1000);//每隔1s调用一次，

    </script>
    <script src="js/lbt.js"></script>
</body>

</html>